<div class="mat-subheading-2" fxLayout="row" fxLayoutAlign="center center">
  <mat-form-field fxFlex="50">
    <input (keyup)="applyFilter($event.target.value)" [(ngModel)]="searchText" fxFill matInput
           placeholder="Filter by type or activities name">
    <button (click)="searchText=''; applyFilter(searchText);" *ngIf="searchText" aria-label="Clear" mat-icon-button
            matSuffix>
      <mat-icon fontSet="material-icons-outlined">close</mat-icon>
    </button>
  </mat-form-field>
</div>
<mat-table [dataSource]="dataSource" matSort>
  <ng-container *ngFor="let column of columns" [matColumnDef]="column.id" >
    <mat-header-cell [fxFlex]="column.width" *matHeaderCellDef mat-sort-header matTooltip="{{column.description}}">
      {{column.header}}
    </mat-header-cell>
    <mat-cell [fxFlex]="column.width" *matCellDef="let dayFitnessTrend">
      <ng-container *ngIf="column.type === FitnessTrendColumnType.TEXT">
        {{column.printText(dayFitnessTrend)}}
      </ng-container>
      <ng-container *ngIf="column.type === FitnessTrendColumnType.ACTIVITY_NAME">
        <ng-container *ngIf="dayFitnessTrend.ids.length">
          <button (click)="onActivitiesClicked(dayFitnessTrend)" *ngIf="dayFitnessTrend.ids.length" color="primary"
                  mat-button>
            {{column.printText(dayFitnessTrend)}}
          </button>
        </ng-container>
        <ng-container *ngIf="!dayFitnessTrend.ids.length">
          {{column.printText(dayFitnessTrend)}}
        </ng-container>
      </ng-container>
      <ng-container *ngIf="column.type === FitnessTrendColumnType.ATHLETE_SETTINGS">
        <button (click)="onViewAthleteSettings(dayFitnessTrend)" *ngIf="dayFitnessTrend.ids.length"
                color="primary"
                mat-icon-button>
          <mat-icon fontSet="material-icons-outlined">portrait</mat-icon>
        </button>
      </ng-container>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 15, 25, 50]"
               [pageSize]="10">
</mat-paginator>

<button (click)="onSpreadSheetExport()" color="primary" mat-stroked-button>Export to spreadsheet</button>
